<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-button style="margin-bottom: 10px;" type="success" @click="addForm = true">添加</el-button>
        <el-form-item style="float: right; margin-left: 20px">
          <el-select v-model="status"
                     :empty-values="[null]"
                     :value-on-clear="null"
                     clearable placeholder="是否禁用" style="width: 200px" @change="selectAll()">
            <el-option label="启用" value="0"/>
            <el-option label="禁用" value="1"/>
          </el-select>
        </el-form-item>
        <el-table :cell-style="{ textAlign: 'center' }" :data="adminList" :header-cell-style="{ 'text-align': 'center' }" border
                  style="font-size: 13px;">
          <el-table-column label="ID" prop="id"/>
          <el-table-column label="用户名" prop="username"/>
          <el-table-column label="电话" prop="phone"/>
          <el-table-column label="邮箱" prop="email"/>
          <el-table-column label="真实姓名" prop="realname"/>
          <el-table-column label="升职时间" prop="createTime"/>
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch v-if="scope.row.id==admin.id" v-model="scope.row.status"
                         :active-value="1"
                         :inactive-value="0"
                         active-text="启用"
                         class="ml-2"
                         disabled
                         inactive-text="禁用"
                         inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
              <el-switch v-else
                         v-model="scope.row.status"
                         :active-value="1"
                         :inactive-value="0"
                         active-text="启用"
                         class="ml-2"
                         inactive-text="禁用"
                         inline-prompt
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                         @change="change(scope.row.id)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-popconfirm cancel-button-text="取消" confirm-button-text="确定" title="你确定要重置吗?"
                             @confirm="reset(scope.row.id)">
                <template #reference>
                  <el-button size="small" type="danger">重置密码</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
  <!--  添加-->
  <el-dialog v-model="addForm" title="添加商品">
    <el-form :model="form">
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="adminAddList.username" autocomplete="off" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="adminAddList.phone" autocomplete="off" placeholder="请输入电话"/>
      </el-form-item>
      <el-form-item label="邮件" label-width="20%">
        <el-input v-model="adminAddList.email" autocomplete="off" placeholder="请输入邮件"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="adminAddList.realname" autocomplete="off" placeholder="请输入真实姓名"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="insert">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import adminApi from "@/api/adminApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";

const admin = ref({
  id: null
});
const status = ref(null)
const adminAddList = ref({
  username: "",
  password: "",
  salt: "",
  phone: "",
  email: "",
  realname: "",
  createTime: "",
  status: 0
})

function cancel() {
  addForm.value = false;
  adminAddList.value = {
    username: "",
    password: "",
    salt: "",
    phone: "",
    email: "",
    realname: "",
    createTime: "",
    status: 0
  }
}

const addForm = ref(false)
const adminList = ref([])

function selectAll() {
  adminApi.selectAll(status.value)
      .then(resp => {
        adminList.value = resp.data;
        console.log(resp.data, 99999)
      })
}

selectAll();

function getInfo() {
  adminApi.getInfo()
      .then(resp => {
        admin.value = resp.data
      })
}

getInfo();

function insert() {
  adminApi.insert(adminAddList.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          addForm.value = false;
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

function change(id) {
  adminApi.delete(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

//重置密码
function reset(id) {
  adminApi.reset(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
        } else {
          ElMessage.error(resp.msg)
        }

      })
}
</script>


<style scoped>

</style>